<template>
	<view class="Home">
		<view class="Logo"><image src="../../static/logo2.png" mode="widthFix"></image></view>
		<view class="Banner">
			<special-banner :banner-list="bannerList" :swiper-config="swiperConfig"></special-banner>
		</view>
		<view class="content">
			<view class="content_list" @click="openWarranty">
				<view class="content_list_img"><image src="../../static/bg2.jpg" mode="aspectFill"></image></view>
				<view class="content_list_title">
					<view class="list_title_dd">质保查询</view>
					<view class="list_title_dt">></view>
				</view>
			</view>
			<view class="content_list" @click="openJoin">
				<view class="content_list_img"><image src="../../static/bg.jpg" mode="aspectFill"></image></view>
				<view class="content_list_title">
					<view class="list_title_dd">门店加盟</view>
					<view class="list_title_dt">></view>
				</view>
			</view>
		</view>
		<view class="Tab">
			<view class="Tab_list" @click="openWebBrand">
				<view class="Tab_list_title">品牌</view>
			</view>
			<view class="Tab_list" @click="openWebProduct">
				<view class="Tab_list_title">车衣</view>
			</view>
			<view class="Tab_icon"><image src="../../static/bn1.png"></image></view>
			<view class="Tab_list" @click="openWebFw">
				<view class="Tab_list_title">防伪</view>
			</view>
			<view class="Tab_list" @click="openWarranty">
				<view class="Tab_list_title">质保</view>
			</view>
		</view>
	</view>
</template>

<script>
	import specialBanner from '../../components/specialBanner/specialBanner.vue'
	export default {
		components: {
			specialBanner
		},
		data() {
			return {
				bannerList: [{
					picture: '../../static/banner1.jpg',
					path: ''
				}, {
					picture: '../../static/banner2.jpg',
					path: ''
				}, {
					picture: '../../static/banner3.jpg',
					path: ''
				}],
				swiperConfig: {
					indicatorDots: true,
					indicatorColor: 'rgba(255, 255, 255, .4)',
					indicatorActiveColor: 'rgba(255, 255, 255, 1)',
					autoplay: false,
					interval: 3000,
					duration: 300,
					circular: true,
					previousMargin: '58rpx',
					nextMargin: '58rpx'
				}
			}
		},
		methods: {
			//发送给朋友
			onShareAppMessage() {
			  return {
				title: '膜兄弟小程序',
				imageUrl: '../../static/banner1.jpg',
				path: '/pages/index/Home'
			  }
			},		
			//分享到朋友圈
			onShareTimeline(res) { 
				return {
					title: "膜兄弟小程序",
					imageUrl: '../../static/banner1.jpg',
				}
			},
		  openWebBrand() {
		    console.log('正在打开网页...');
		    uni.navigateTo({
		      url: '/pages/index/webView?url=https://www.moxiongdi.com/about-us/',
		    });
		  },
		  openWebProduct() {
		    console.log('正在打开网页...');
		    uni.navigateTo({
		      url: '/pages/index/webView?url=https://www.moxiongdi.com/car-clothing-series/',
		    });
		  },
		  openWebFw() {
		    console.log('正在打开网页...');
		    uni.navigateTo({
		      url: '/pages/index/webView?url=https://fw.moxiongdi.com/h5/#/',
		    });
		  },
		  openWarranty() {
		    uni.navigateTo({
		      url: '/pages/index/index',
		    });
		  },
		  openJoin() {
		    uni.navigateTo({
		      url: '/pages/index/Join',
		    });
		  },
		},
	}
</script>


<style>
	.Home{ padding-bottom: 180upx;}
	.Home .Logo{ padding: 0px 35upx; position: fixed; left: 0; background: #fff; padding-top: 99upx; background: #fff; z-index: 8; width: 100%; box-sizing: border-box; padding-bottom: 35upx; top: 0;}
	.Home .Logo image{ width: 300upx;}
	.Home .Banner{ margin-top: 210upx;}
	.Home .content{ padding: 0px 35upx; display: flex; justify-content: space-between; box-sizing: border-box; margin-top: 65upx;}
	.Home .content .content_list{ width: 48%; border-radius: 15upx; overflow: hidden; position: relative;}
	.Home .content .content_list .content_list_img{ display: flex;}
	.Home .content .content_list .content_list_img image{ width: 100%; height: 220upx;}
	.Home .content .content_list .content_list_title{ position: absolute; bottom: 0; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; padding: 20upx; box-sizing: border-box; height: 100%;  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)); }
	.Home .content .content_list .content_list_title .list_title_dd{ color: #fff; font-size: 28upx;}
	.Home .content .content_list .content_list_title .list_title_dt{ color: #fff; font-size: 28upx;}
	
	.Tab{ display: flex; justify-content: space-between; align-items: center; position: fixed; bottom: 0; width: 100%; left: 0; border-top: 1px solid #eee; padding: 20upx 45upx; box-sizing: border-box; padding-bottom: 25upx; background: #fff;}
	.Tab .Tab_icon{ display: flex;}
	.Tab .Tab_icon image{ width: 85upx; height: 55upx;}
	.Tab .Tab_list .Tab_list_icon{ display: flex; justify-content: center; margin-bottom: 5upx;}
	.Tab .Tab_list .Tab_list_icon image{ width: 40upx; height: 40upx;}
	.Tab .Tab_list .Tab_list_title{ font-size: 32upx;}
</style>
